@charset "UTF-8";




/*---------系统与服务----------*/

.service .mod-banner {
    height: 860px;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.swiper-container,
.swiper-slide,
.bgcolor,
.bgimg {
    width: 100%;
    height: 100%;
}

.swiper-slide .container {
    position: relative;
}


.swiper-slide .left-image {
    position: absolute;
    left: 0;
    top: 170px;
    text-align: center;
    transition: all .15s ease-out;
}

.swiper-slide .imgList {
    position: absolute;
    top: 0;
}

.swiper-slide .right-text {
    position: absolute;
    left: 66%;
    top: 250px;
    overflow: hidden;
    color: #fff;
    text-align: left;
    -webkit-animation: banner-text .8s cubic-bezier(.4, 0, .2, 1) 0s 1;
    animation: banner-text .8s cubic-bezier(.4, 0, .2, 1) 0s 1;
}

.system-bgcolor {
    background: -webkit-linear-gradient(45deg, #27052f, #232942);
    background: -o-linear-gradient(45deg, #27052f, #232942);
    background: -moz-linear-gradient(45deg, #27052f, #232942);
    background: linear-gradient(45deg, #27052f, #232942);
}

.system-bgimg .left-image {
    width: 645px;
    height: 449px;
    -webkit-animation: banner-slide-20 .8s cubic-bezier(.4, 0, .2, 1) 0s 1;
    animation: banner-slide-20 .8s cubic-bezier(.4, 0, .2, 1) 0s 1;
}

@keyframes banner-slide-20 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.system-bgimg .img1 {
    z-index: 999;
}

.system-bgimg .right-text {
    position: absolute;
    top: 345px;
    right: 45px;
    width: 318px;
    overflow: hidden;
    -webkit-animation: banner-text .8s cubic-bezier(.4, 0, .2, 1) 0s 1;
    animation: banner-text .8s cubic-bezier(.4, 0, .2, 1) 0s 1;
}

.system-bgimg .right-text .title {
    line-height: 25px;
    text-align: left;
}

.system-bgimg .right-text .detail {
    margin-top: 30px;
    line-height: 21px;
    font-size: 14px;
}

@-webkit-keyframes banner-text {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0)
    }
}

@keyframes banner-text {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.service .mod-user {
    height: 782px;
    overflow: hidden;
}

.service .user-con {
    margin-top: 69px;
    background: url(../images/service-user-img.png) no-repeat top/270px;
    height: 533px;
    position: relative;
}

.service .userlist {
    position: relative;
    top: 40px;
}

.service .userlist li:not(:last-child) {
    margin-bottom: 126px;
}

.service .right-list .icon {
    margin-left: 35px;
}

.service li .text span .service li .text p {
    color: #666;
    line-height: 21px;
}

.service li .text p {
    margin-top: 10px;
}

.service .left-list,
.service .right-list {
    position: absolute;
}

.service .left-list {
    left: 0;
}

.service .left-list .text,
.back-list li .text,
.service .infor-list li .text {
    text-align: left;
}

.service .right-list {
    right: 0;
}

.service .right-list .text {
    text-align: right;
}


.service .left,
.service li .icon,
.service li .text {
    float: left;
}

.service .userlist .text {
    width: 247px;
}

.service .userlist .icon,
.back-list li .icon,
.service .mod-data .dataView li .icon {
    width: 60px;
    height: 60px;
}

.service .left-list .icon,
.back-list li .icon,
.service .mod-data .dataView li .icon {
    margin-right: 35px;
}

.service .mod-back {
    height: 636px;
    overflow: hidden;
}

.service .back-con {
    background: url(../images/service-back-bg.png) no-repeat left/475px;
    height: 378px;
    position: relative;
    top: 77px;
}

.service .back-list {
    width: 506px;
    position: absolute;
    right: 0;
    top: 30px;
}

.service .back-list li {
    width: 221px;
    height: 112px;
    float: left;
    margin-bottom: 70px;
}

.service .back-list li:nth-child(2n+1) {
    margin-right: 30px;
}

.service .back-list li .text {
    width: 120px;
    padding-right: 6px;
}

.service .mod-little {
    height: 1158px;
    overflow: hidden;
    background: url(../images/service-little-bg.png) 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.service .mod-little .title {
    margin-bottom: 42px;
}

.service .mod-little .text {
    color: #fff;
}

.service .little-con .right {
    float: right;
}

.service .img-list li {
    width: 196px;
    height: 383px;
    float: left;
}

.service .img-list li:not(:last-child) {
    margin-right: 54px;
}

.service .infor-list {
    margin-top: 38px;
}

.service .infor-list li .icon {
    width: 57px;
    height: 61px;
    margin-right: 40px;
}

.service .infor-list li:not(:last-child) {
    margin-bottom: 60px;
}

.service .infor-list li .text {
    width: 211px;
}

.service .mod-data {
    height: 1025px;
    overflow: hidden;
}

.service .mod-data .title .desc {
    width: 597px;
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 58px;
}

.service .mod-data .data-view {
    background: url(../images/service-data-bg.png) no-repeat top/740px;
    height: 591px;
}

.service .mod-data .dataView {
    margin-top: 40px;
    color: #666;
}

.service .mod-data .dataView li {
    float: left;
    width: 305px;
}

.service .mod-data .dataView li:not(:last-child) {
    margin-right: 75px;
}

.service .mod-data .dataView li .text p {
    width: 210px;
    height: 80px;
    overflow: hidden;
}

.service .mod-open {
    height: 849px;
    overflow: hidden;
    background: #F9947E url(../images/service-open-bg.png) 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.service .mod-open .title .desc {
    width: 766px;
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 40px;
}

.service .mod-open .title .text {
    color: #fff;
}

.service .mod-open .open-slide {
    display: inline-block;
}

.service .mod-open .open-slide li {
    float: left;
    width: 266px;
}

.service .mod-open .open-slide li:not(:last-child) {
    margin-right: 18px;
}

.service .mod-open .open-slide li .imgs {
    width: 265px;
    height: 153px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
}

.service .mod-open .open-slide li .btn {
    width: 140px;
    height: 24px;
    line-height: 24px;
    margin: auto;
    margin-top: 27px;
    background: #fff;
    color: #F05B48;
    text-align: center;
    border-radius: 12px;
}

.service .mod-open .susp {
    height: 412px;
    margin-top: 10px;
    position: relative;
}

.animation {
    -webkit-animation: gas-shake 2s infinite ease-in-out;
    -moz-animation: gas-shake 2s infinite ease-in-out;
    -o-animation: gas-shake 2s infinite ease-in-out;
}

@keyframes gas-shake {
    0% {
        top: 50%;
    }
    60% {
        top: 56%;
    }

    100% {
        top: 50%;
    }
}

.service .mod-open .susp .gas {
    text-align: center;
    padding-top: 18px;
    line-height: 21px;
    position: absolute;
    top: 50%;
}

.service .mod-open .susp .gas-1 {
    width: 54px;
    height: 140px;
    background: url(../images/service-open-icon1.png) no-repeat top/54px;
    margin-top: -129px;
}

.service .mod-open .susp .gas-2 {
    width: 54px;
    height: 140px;
    background: url(../images/service-open-icon2.png) no-repeat top/54px;
    margin-left: 99px;
    margin-top: -20px;
}

.service .mod-open .susp .gas-3 {
    width: 60px;
    height: 146px;
    background: url(../images/service-open-icon3.png) no-repeat top/60px;
    margin-left: 256px;
    margin-top: -106px;
}

.service .mod-open .susp .gas-4 {
    width: 58px;
    height: 40px;
    background: url(../images/service-open-icon4.png) no-repeat top/58px;
    margin-left: 382px;
    margin-top: 4px;
}

.service .mod-open .susp .gas-5 {
    width: 66px;
    height: 156px;
    background: url(../images/service-open-icon5.png) no-repeat top/66px;
    right: 545px;
    margin-top: -180px;
    line-height: 27px;
}

.service .mod-open .susp .gas-6 {
    width: 82px;
    height: 82px;
    background: url(../images/service-open-icon6.png) no-repeat top/82px;
    right: 455px;
    margin-top: 69px;
    line-height: 82px;
    padding-top: 0;
}

.service .mod-open .susp .gas-7 {
    width: 59px;
    height: 113px;
    background: url(../images/service-open-icon7.png) no-repeat top/59px;
    right: 362px;
    margin-top: -73px;
}

.service .mod-open .susp .gas-8 {
    width: 59px;
    height: 97px;
    background: url(../images/service-open-icon8.png) no-repeat top/59px;
    right: 201px;
    margin-top: -125px;
}

.service .mod-open .susp .gas-9 {
    width: 70px;
    height: 156px;
    background: url(../images/service-open-icon9.png) no-repeat top/70px;
    right: 101px;
    margin-top: -21px;
    padding-top: 25px;
}

.service .mod-open .susp .gas-10 {
    width: 49px;
    height: 49px;
    background: url(../images/service-open-icon10.png) no-repeat top/49px;
    right: 0;
    margin-top: -92px;
    line-height: 49px;
    padding-top: 0;
}



/*title */

.title {
    text-align: center;
}

.title-con {
    display: inline-block;
}

.title span {
    float: left;
}

.title .icon {
    width: 28px;
}

.title .text {
    margin-left: 6px;
    margin-right: 6px;
    line-height: 20px;
    color: #F05B48;
}

.mLittle {
    display: none;
}



/* 750以下*/

@media screen and (max-width: 750px) {
    .mLittle {
        display: block;
    }
    .service li .text p span,
    .pLittle,
    .service .mod-open .susp {
        display: none;
    }
    .service .left-list .icon,
    .service .right-list .icon,
    .back-list li .icon,
    .service .mod-data .dataView li .icon {
        width: .9rem;
        height: .9rem;
        margin-right: .4rem;
    }
    .service .mod-banner {
        height: 9.44rem;
    }
    .system-bgimg {
        background: url(../mobile-img/home-swiper-bg2.png) center center/7.5rem !important;
    }
    .mod-banner .swiper-slide .left-image {
        top: 1.89rem;
        right: 0;
        margin: auto;
    }
    .system-bgimg .left-image {
        background: url(../mobile-img/home-banner2.png) no-repeat top center/5.93rem !important;
        width: 5.93rem;
        height: 5.07rem;
    }
    .mod-banner .swiper-slide .right-text {
        top: 6.34rem;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
    }
    .system-bgimg .right-text .title {
        font-size: .32rem;
        text-align: center;
    }
    .system-bgimg .right-text .detail {
        margin-top: .2rem;
        margin-left: .4rem;
        margin-right: .4rem;
        text-align: justify;
        font-size: .26rem;
    }
    .service .mod-user {
        height: 18rem;
    }
    .service .user-con {
        margin-top: .6rem;
        height: 6.01rem;
    }
    .service .userlist {
        width: calc(100vw - 1rem);
        height: 3.36rem;
        margin: auto;
    }
    .service .userlist li {
        margin-bottom: .59rem !important;
    }
    .service .userlist .text span {
        font-size: .28rem;
    }
    .service .userlist .text {
        width: calc(100vw - 2.4rem);
        text-align: justify;
    }
    .service .left-list {
        top: 6.81rem;
    }
    .service .left-list,
    .service .right-list {
        position: absolute;
        left: 0;
        right: 0;
    }
    .service .right-list {
        top: 11.82rem;
    }
    .service .right-list .icon {
        float: left;
        margin-left: 0;
    }
    .service .right-list li {
        position: relative;
    }
    .service .right-list .text {
        float: right;
        text-align: left;
        position: absolute;
        left: 1.3rem;
    }
    .service li .text p,
    .service .mod-data .dataView li .text p {
        margin-top: .1rem;
        font-size: .24rem;
        color: #666;
    }
    .service .mod-back {
        height: 13.62rem;
    }
    .service .back-con,.service .mod-data .data-view {
        top: .6rem;
        background-size: calc(100vw - 1.66rem) auto;
        background-position: center center;
        max-height: 4.46rem;
    }
    .service .back-list,
    .service .mod-data .dataView {
        width: calc(100vw - .8rem);
        margin: auto;
    }
    .service .userlist li,
    .service .back-list li,
    .service .mod-data .dataView li {
        width: 100%;
        height: auto;
    }
    .service .back-list li .text,
    .service .mod-data .dataView li .text {
        width: calc(100vw - 2.2rem);
        text-align: justify;
    }
    .service .back-list {
        top: 5.16rem;
        left: 0;
    }
    .service .back-list li,
    .service .mod-data .dataView li {
        margin-bottom: .61rem;
        margin-right: 0 !important;
    }
    .service .back-list li .text {
        padding-right: 0;
    }
    .service .mod-little {
        background: #323240;
        height: 11.88rem;
    }
    .mod-little .swiper-container {
        overflow: inherit;
    }
    .mod-little .swiper-container .swiper-slide {
        width: 91%;
        height: 9.22rem;
        padding: 0 .15rem;
        border-radius: 4px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .mod-little .swiper-container .slide-box {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        color: #fff;
        background: url(../mobile-img/little-bg.png) 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .swiper-pagination-bullet {
        width: .12rem;
        height: .12rem;
        text-align: center;
        line-height: 8px;
        color: #000;
        opacity: 0.2;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        border: 0;
        cursor: pointer;
        transition: all .8s ease-out;
    }
    .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: -.52rem;
    }
    .swiper-pagination-bullet-active {
        opacity: 0.5;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    }
    .mod-little .swiper-container .photo {
        width: 3.21rem;
        margin: auto;
        margin-top: .66rem;
        margin-bottom: .47rem;
    }
    .mod-little .swiper-container .desc {
        text-align: center;
    }
    .mod-little .swiper-container .desc .bt {
        font-size: .28rem;
    }
    .mod-little .swiper-container .desc .text {
        font-size: .24rem;
        margin-top: .2rem;
    }
    .mod-little .swiper-container .text span {
        display: block;
    }
    .service .mod-data {
        height: 14.2rem;
    }
    .service .mod-data .title .desc,
    .service .mod-open .title .desc {
        margin: .4rem .4rem .6rem .4rem;
        width: auto;
        text-align: center;
        font-size: .26rem;
        color: #666;
    }
    .service .mod-data .dataView {
        margin-top: .6rem;
    } 
    .service .mod-data .dataView li .text p {
        width: 100%;
        height: 100%;
    }
    .service .mod-open {
        height: 9.18rem;
        background: url(../mobile-img/service-open-bg.png) 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .service .mod-open .title .desc {
        color: #fff;
    }
    .service .mod-open .open-slide {
        width: calc(100vw - .8rem);
        margin: auto;
        display: inherit;
    }
    .service .mod-open .open-slide li {
        width: calc(46vw - .28rem);
        display: flex;
        flex-direction: column;
        margin-right: 0 !important;
        margin-bottom: .4rem;
    }
    .service .mod-open .open-slide li .imgs {
        width: 100%;
        height: 1.84rem;
        max-height: 1.84rem;
    }
    .service .mod-open .open-slide li:not(:nth-child(2n)) {
        margin-right: .28rem !important;
    }
    .service .mod-open .open-slide li .btn {
        width: 2.2rem;
        height: .36rem;
        line-height: .36rem;
        font-size: .24rem;
        margin-top: .16rem;
    }
}

@media screen and (max-width: 640px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 375px) {}

@media screen and (max-width: 320px) {
    .service .mod-banner {
        height: 10.2rem;
    }
    .service .mod-little {
        height: 
    }
}